<template>
  <div class="flex flex-col h-full">
    <SearchContainer is-width @search="getData" @reset="onReset">
      <a-form ref="formRef" class="form-style-flex" :model="formState">
        <a-form-item name="pyjm" label="" class="w-[245px]">
          <a-input v-model:value="formState.pyjm" placeholder="姓名/助记码/卡号/手机号/身份证号" />
        </a-form-item>
        <a-form-item name="dateRange" label="登记时间" class="w-[290px] ml-2">
          <a-range-picker v-model:value="formState.dateRange" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
        </a-form-item>
        <a-form-item label="就诊事项" class="w-[210px] ml-3">
          <a-select v-model:value="formState.dictOutpMatterId" placeholder="请选择就诊事项" allow-clear>
            <a-select-option v-for="(item, index) in dictOutList" :key="index" :value="item.dictOutpMatterId">{{ item.matterName }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="关注项目" class="w-[240px] ml-2">
          <SelectFocusProject v-model:value="formState.brGzxm" max-tag-count="responsive" multiple />
        </a-form-item>
        <a-form-item name="ghzts" label="状态" class="w-[200px] pl-2">
          <a-select v-model:value="formState.ghzts" placeholder="请选择" mode="multiple" :max-tag-count="1">
            <a-select-option value="0">候诊中</a-select-option>
            <a-select-option value="1">已就诊</a-select-option>
            <a-select-option value="2">已退号</a-select-option>
            <a-select-option value="3">已完诊</a-select-option>
            <a-select-option value="4">待回诊</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="医生" class="w-[240px] ml-2">
          <SelectTable v-model:value="formState.ghysName" type="医生" page-size="999" @blur="onBlur('ghys')" @select="onSelectEmployee('ghys', $event)" />
        </a-form-item>
        <a-form-item label="业务员" class="w-[240px] ml-2">
          <SelectTable v-model:value="formState.brYwyName" type="员工" page-size="999" @blur="onBlur('brYwy')" @select="onSelectEmployee('brYwy', $event)" />
        </a-form-item>
        <a-form-item label="负责人" class="w-[240px] ml-2">
          <SelectTable v-model:value="formState.brFzrName" type="员工" page-size="999" @blur="onBlur('brFzr')" @select="onSelectEmployee('brFzr', $event)" />
        </a-form-item>
        <a-form-item label="咨询师" class="w-[240px] ml-2">
          <SelectTable v-model:value="formState.brZxsName" type="员工" page-size="999" @blur="onBlur('brZxs')" @select="onSelectEmployee('brZxs', $event)" />
        </a-form-item>
        <a-form-item label="操作员" class="w-[240px] ml-2">
          <SelectTable v-model:value="formState.czyName" type="员工" page-size="999" @blur="onBlur('czy')" @select="onSelectEmployee('czy', $event)" />
        </a-form-item>
        <a-form-item name="ksdm" label="科室" class="w-[240px] ml-2">
          <SelectSection v-model:value="formState.ksdm" max-tag-count="responsive" multiple />
        </a-form-item>
      </a-form>
    </SearchContainer>
    <a-card class="mt-2 flex-1">
      <div class="flex justify-end mb-2">
        <BaseExport type="门诊" name="门诊就诊查询" code="000555" :search-params="formState">导出</BaseExport>
      </div>
      <BaseTable
        fill
        bordered
        column-code="000555"
        :loading="loading"
        :scroll="{ x: 4600 }"
        :data-source="tableData"
        :pagination="pagination"
        :exclude-columns="getSystemConfig('ENABLE_CHARGE_STANDARD_MODE') === '1' ? [] : ['chargeStandardName']"
      >
        <template #bodyCell="{ column, index, record }">
          <template v-if="column.dataIndex == 'xh'">
            {{ index + 1 }}
          </template>
          <template v-if="column.dataIndex == 'ghztName'">
            <a-tag v-if="record.ghzt === 0" color="blue">候诊中</a-tag>
            <a-tag v-else-if="record.ghzt === 1" color="green">已就诊</a-tag>
            <a-tag v-else-if="record.ghzt === 2" color="red">已退号</a-tag>
            <a-tag v-else-if="record.ghzt === 5" color="orange">未签到</a-tag>
            <a-tag v-else color="green">已完诊</a-tag>
          </template>
        </template>
      </BaseTable>
    </a-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import dayjs from 'dayjs'
import { post } from '@/utils/request'
import SearchContainer from '@/components/SearchContainer'
import { getSystemConfig } from '@/utils/systemConfig'

const isPrint = ref('')
const dictOutList = ref([])
const formRef = ref(null)
const formState = ref({
  dateRange: [dayjs().format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
  ksdm: [],
  brGzxm: [],
  type: '0'
})

const onSelectEmployee = (key, select) => {
  formState.value[key + 'Name'] = select.empName
  formState.value[key] = select.empId
}

const onBlur = (key) => {
  formState.value[key] = ''
}

const onReset = () => {
  formRef.value.resetFields()
  formState.value.brGzxm = []
}

const { loading, tableData, pagination, getData } = useTable({
  url: '/outp/mzdj/getOutpRecordInfoList',
  immediate: true,
  params: formState.value,
  formatParams: (params) => {
    return {
      ...params,
      stdate: params['dateRange']?.[0],
      eddate: params['dateRange']?.[1]
    }
  }
})
// 获取就诊事项
const getDictOutList = async () => {
  const res = await post('/outp/mzdj/getDictOutpMatterNumberList')
  if (res.code !== 0) return message.error(res.msg)
  dictOutList.value = res.data
  // if (state !== 1) {
  //   visitType.value = res.data[0].dictOutpMatterId
  // }
}

onMounted(() => {
  // 0：通用|1：上海黑马|2：茗视光
  isPrint.value = getSystemConfig('REGISTRATION_FORM_PRINT_MODE') === '2' ? '/outp/outPrint/getRegistrationPrint' : '/outp/outPrint/getRegistrationBillPrint'
  getDictOutList()
})
</script>
<style lang="less" scoped>
.ant-picker {
  width: 100%;
}
</style>
